<template>
  <div>
    <div class="header">
      <slot name="header" :message></slot>
    </div>
    <div class="footer">
      <!-- 这里必须是v-bind绑定才能解构 -->
      <slot name="footer" v-bind="message"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Message {
  id: number
  name: string
}

const message = ref<Message>({
  id: 1,
  name: '我是通过插槽传值过来的'
})
</script>

<style lang="scss" scoped>
.header {
  border: 1px solid orange;
}
.footer {
  margin-top: 10px;
  border: 1px solid rgb(16, 86, 144);
}
</style>
